<template>
  <div class="bd">
    <el-row>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <tab-pane :data="businessData.data1" data-chart-type="number" data-size="mini" pane-type="pane-line"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <tab-pane :data="businessData.data2" data-chart-type="number" data-size="mini" pane-type="pane-line"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <tab-pane :data="businessData.data3" data-chart-type="number" data-size="mini" pane-type="pane-line"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <tab-pane :data="businessData.data4" data-chart-type="number" data-size="mini" pane-type="pane-line"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <tab-pane :data="businessData.data5" data-chart-type="line" data-size="normal" pane-type="pane-line" legend="任意事件的用户数"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <tab-pane :data="businessData.data6" data-chart-type="line" data-size="normal" pane-type="pane-line" legend="任意事件的用户数"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <tab-pane :data="businessData.data7" data-chart-type="line" data-size="normal" pane-type="pane-line-multi"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <tab-pane :data="businessData.data8" data-chart-type="line" data-size="normal" pane-type="pane-line-multi2"/>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <tab-pane :data="businessData.data9" data-chart-type="line" data-size="large" pane-type="pane-line" legend="人均观看时长"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TabPane from '@/components/TabPane'
export default {
  components: {
    TabPane
  },
  data() {
    return {
      businessData: {
        data1: {
          title: '[ 活跃用户数 ]',
          timespan: '2019-11-03 ~ 2019-11-03',
          number: '2099',
          measuresUnit: '人',
          yearOnYear: '0.0116',
          monthOnMonth: '-0.0214'
        },
        data2: {
          title: '[ 新增激活人数 ]',
          timespan: '2019-11-03 ~ 2019-11-03',
          number: '547',
          measuresUnit: '人',
          yearOnYear: '-0.4212',
          monthOnMonth: '-0.0776'
        },
        data3: {
          title: '[ VIP订购人数 ]',
          timespan: '2019-11-03 ~ 2019-11-03',
          number: '5537',
          measuresUnit: '人',
          yearOnYear: '',
          monthOnMonth: '-0.0214'
        },
        data4: {
          title: '[ 人均观看总时长 ]',
          timespan: '2019-11-03 ~ 2019-11-03',
          number: '3.68',
          measuresUnit: '小时',
          yearOnYear: '0.0055',
          monthOnMonth: '-0.0108'
        },
        data5: {
          title: '[ 活跃用户数 ]',
          timespan: '2019-11-03 ~ 2019-11-03',
          number: '2099',
          measuresUnit: '人',
          yearOnYear: '0.0161',
          monthOnMonth: '-0.0214',
          total: '11187',
          average: '2110'
        },
        data6: {
          title: '[ 小时活跃趋势 ]',
          timespan: '2019-11-03 ~ 2019-11-03',
          number: '366',
          measuresUnit: '人',
          yearOnYear: '0.1438',
          monthOnMonth: '0.0368',
          total: '2110',
          average: '293.42'
        },
        data7: {
          title: '[ 省份活跃用户数 ]',
          timespan: '2019-11-07 ~ 2019-11-13',
          chart: {
            color: ['#55ACEE', '#4CDFC0', '#FF9945', '#facf2a', '#788cf0'],
            series: ['2019-11-07', '2019-11-08', '2019-11-09', '2019-11-10', '2019-11-11', '2019-11-12', '2019-11-13'],
            row: [
              {
                by_values: '广东',
                values: [120, 237, 101, 134, 90, 230, 210]
              },
              {
                by_values: '广西',
                values: [220, 182, 191, 234, 290, 220, 310]
              },
              {
                by_values: '江西',
                values: [12, 43, 123, 321, 53, 324, 22, 54]
              },
              {
                by_values: '海南',
                values: [32, 321, 321, 322, 324, 234, 33]
              },
              {
                by_values: '上海',
                values: [123, 43, 52, 522, 533, 23, 134]
              }
            ]
          }
        },
        data8: {
          title: '[ 运营商活跃用户数 ]',
          timespan: '2019-11-07 ~ 2019-11-13',
          chart: {
            color: ['#55ACEE', '#4CDFC0', '#FF9945'],
            series: ['2019-11-07', '2019-11-08', '2019-11-09', '2019-11-10', '2019-11-11', '2019-11-12', '2019-11-13'],
            row: [
              {
                by_values: '电信',
                values: [120, 237, 101, 134, 90, 230, 210]
              },
              {
                by_values: '联通',
                values: [220, 182, 191, 234, 290, 220, 310]
              },
              {
                by_values: '移动',
                values: [12, 43, 123, 321, 53, 324, 22, 54]
              }
            ]
          }
        },
        data9: {
          title: '[ 人均观看总时长 ]',
          timespan: '2019-10-31 ~ 2019-11-01',
          number: '3.7',
          measuresUnit: '小时',
          yearOnYear: '0.0533',
          monthOnMonth: '-0.1125',
          total: '4.82',
          average: '3.71'
        }
      }
    }
  }
}
</script>
